<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <div class="header">Header</div> <div class="menu">Menu</div> <div class="content">Content</div> <div class="footer">Footer</div> </div>

html, body { height: 100vh; } .wrapper{ height: 100%; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 1fr 50px; } .header{ background-color: aqua; grid-column:3/-1; } .menu{ background-color: blue; grid-column: 1/3; grid-row: 1/3; } .content{ background-color: azure; grid-column: 3/-1; } .footer{ background-color: black; grid-column:1/-1; color: #fff; }